<template>
  <div class="company wrap-content">
    <div class="company-tt">
      企业简介
      <span>
        COMPANY PROFILES
      </span>
    </div>
    <div class="company-txt"
         v-html="$t('company.introduce')">
    </div>
    <div class="company-tt">
      核心团队
      <span>
        CORE TEAM
      </span>
    </div>
    <div class="team-container">
      <div class="jobs-items content-wrapper clearfix">
        <div class="col-md-6"
             v-for="v,i in list">
          <article>
            <div class="clearfix">
              <img class="img-responsive"
                   :src="v.img"
                   alt="">
              <div class="img-info">
                <div class="post-name">
                  {{$t('company.user['+i+'].name')}}
                </div>
                <div class="extra">
                  <span>
                    {{$t('company.user['+i+'].extra')}}
                  </span>
                </div>
              </div>
            </div>

            <div class="post-info">
              <div class="post-in">
                <div class="post-content"
                     v-html="$t('company.user['+i+'].content')">
                </div>
              </div>
            </div>
          </article>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: require('../../assets/imgs/company/head1.png'),
        },
        {
          img: require('../../assets/imgs/company/head2.png'),
        },
        {
          img: require('../../assets/imgs/company/head3.png'),
        },
        {
          img: require('../../assets/imgs/company/head4.png'),
        },
        {
          img: require('../../assets/imgs/company/head5.png'),
        },
        {
          img: require('../../assets/imgs/company/head6.png'),
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
@import '~@/theme/mixin.scss';
.company {
  @include clearfix();
  .clearfix {
    @include clearfix();
  }
  &-tt {
    font-size: 36px;
    border-bottom: 1px solid #276db2;
    color: #0159ac;
    padding: 50px 0 20px 0;

    span {
      margin-left: 5px;
      font-size: 16px;
    }
  }
  &-txt {
    padding: 10px 0;
    font-family: NotoSansHans-Light;
    font-size: 16px;
    font-weight: normal;
    color: #595959;
    line-height: 36px;
    text-indent: 2em;
  }

  .team-container {
    .col-md-6 {
      float: left;
      width: 50%;
    }

    article {
      min-height: 220px;
      padding: 15px 20px;
      border: 1px solid #e9eaee;
      margin: 20px 20px;
      box-sizing: content-box;

      .img-responsive {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        float: left;
        margin-right: 30px;
      }

      .extra {
        margin-top: 10px;
      }

      @media (max-width: 767px) {
        .img-info {
          margin-top: 10px;
          float: left;
          width: 100%;
        }
      }

      .img-info {
        float: left;
      }

      .post-name {
        font-size: 30px;
        color: #475572;
      }

      .post-content {
        text-align: left;
        color: #6e6e6e;
      }

      .post-in {
        padding: 30px 0 0 0;
      }
    }
  }
}
</style>